<template>
  <div class="app-container">
    <a-row :gutter="24">
      <a-card
        title="创建游戏"
        :bordered="false"
        class="box-card"
        headStyle="text-align: center;font-weight: bold;font-size: 20px;border-bottom: none;"
      >
        <!-- <h1 slot="title">创建游戏</h1> -->
        <a-form
          layout="horizontal"
          :model="formState"
          ref="formRef"
          :rules="rules"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
        >
          <a-col :span="3" :xs="12">
            <a-form-item label="游戏图标">
              <a-upload
                v-model:fileList="formState.icons"
                list-type="picture-card"
                :max-count="1"
              >
                <div v-if="formState.icons.length < 1">
                  <PlusOutlined
                    :style="{
                      fontSize: '32px',
                      color: 'rgba(222, 222, 222, 1)',
                    }"
                  />
                  <div class="margintop18">点击或拖拽上传</div>
                </div>
              </a-upload>
              <i class="fr"
                >① 请您上传1张300×300像素，200KB以内的PNG格式直角图标。<br />②
                上传成功后平台将对图片进行统一规范化处理。</i
              >
            </a-form-item>
          </a-col>
          <a-col :span="3" :xs="24">
            <a-form-item label="游戏宣传图">
              <!-- action="/upload.do" -->
              <div class="upload-container">
                <a-upload
                  v-model:fileList="formState.banner"
                  list-type="picture-card"
                  :multiple="true"
                  :max-count="5"
                >
                  <div v-if="formState.banner.length < 5">
                    <PlusOutlined
                      :style="{
                        fontSize: '32px',
                        color: 'rgba(222, 222, 222, 1)',
                      }"
                    />
                    <div class="margintop18">点击或拖拽上传</div>
                  </div>
                </a-upload>
                <div class="upload-instructions">
                  ① 请上传4~5张，建议尺寸1920X1080px，最小不低于370X180px；<br />②
                  支持JPG/PNG格式，单张图片不超过1M。此图片用于应用详情页展示。
                </div>
              </div>
            </a-form-item>
          </a-col>
          <a-col :span="3" :xs="24">
            <a-form-item label="游戏名称" name="name">
              <a-input
                v-model:value="formState.name"
                allow-clear
                show-count
                :maxlength="20"
                placeholder="请输入20字以内的游戏名称"
                style="width: 700px"
              />
              <br />
              <i class="frInput"
                >*包含中文、英文、数字、：、英文半角()，建议游戏名称与APK包中名称一致</i
              >
            </a-form-item>
          </a-col>
          <a-col :span="3" :xs="24">
            <a-form-item label="英文名称" name="englishName">
              <a-input
                v-model:value="formState.englishName"
                allow-clear
                show-count
                :maxlength="20"
                placeholder="请输入英文名称"
                style="width: 700px"
              />
            </a-form-item>
          </a-col>
          <a-col :span="3" :xs="24">
            <a-form-item label="游戏分类" name="types" has-feedback>
              <a-space>
                <a-select
                  v-model:value="formState.play"
                  style="width: 120px"
                  :options="options"
                  show-search
                  allowClear
                  placeholder="玩法"
                />
                <a-select
                  v-model:value="formState.style"
                  style="width: 120px"
                  :options="options1"
                  show-search
                  allowClear
                  placeholder="风格"
                />
                <a-select
                  v-model:value="formState.themes"
                  style="width: 120px"
                  :options="options2"
                  show-search
                  allowClear
                  placeholder="题材"
                />
                <a-select
                  v-model:value="formState.features"
                  mode="multiple"
                  allowClear
                  style="width: 210px"
                  placeholder="特色"
                  :options="options3"
                  show-search
                  :max-tag-count="maxTagCount"
                ></a-select>
              </a-space>
            </a-form-item>
          </a-col>
          <a-col :span="3" :xs="24">
            <a-form-item label="适龄" name="age">
              <a-select
                v-model:value="formState.age"
                class="margin_rt24"
                style="width: 200px"
                :options="options4"
                allowClear
                placeholder="适龄"
              ></a-select>
              <!-- <a-space class="icons" @click="views">
                <QuestionCircleOutlined /><i style="color: #4CC87E;font-style: normal;" >原文</i>
              </a-space> -->
              <a-space class="icons" @click="views">
                <a-popover title="Title">
                  <template #content>
                    <p>Content</p>
                    <p>Content</p>
                  </template>
                  <QuestionCircleOutlined />
                </a-popover>
                <i style="color: #4cc87e; font-style: normal">原文</i>
              </a-space>
            </a-form-item>
          </a-col>
          <a-col :span="3" :xs="24">
            <a-form-item label="游戏状态" name="states">
              <a-checkbox-group
                v-model:value="formState.states"
                :options="optionsWithDisabled"
              >
                <template #label="{ label }">
                  <span>{{ label }}</span>
                </template>
              </a-checkbox-group>
            </a-form-item>
          </a-col>
          <a-col :span="3" :xs="24">
            <a-form-item label="一句话描述" name="description">
              <a-input
                v-model:value="formState.description"
                allow-clear
                show-count
                :maxlength="20"
                placeholder="请输入5至15字的一句话介绍"
                style="width: 700px"
              />
            </a-form-item>
          </a-col>
          <a-col :span="3" :xs="24">
            <a-form-item label="简介" name="profile">
              <a-textarea
                v-model:value="formState.profile"
                allow-clear
                :maxlength="100"
                placeholder="请输入60~500字以内的游戏简介，让用户更了解游戏"
                style="width: 700px"
              />
            </a-form-item>
          </a-col>

          <a-col :span="3" :xs="24">
            <a-form-item :wrapperCol="{ span: 24 }" style="text-align: center">
              <a-button
                htmlType="submit"
                style="
                  margin-right: 16px;
                  background-color: rgba(76, 200, 126, 1);
                "
                type="primary"
                @click="onSave"
                >保存并提交</a-button
              >
              <a-button style="margin-left: 8px" @click="resetForm"
                >取消保存</a-button
              >
            </a-form-item>
          </a-col>
        </a-form>
      </a-card>
    </a-row>
  </div>
</template>

<script setup>
import { ref, reactive, toRaw } from 'vue'
import {
  // SearchOutlined,
  QuestionCircleOutlined,
  PlusOutlined,
  // UploadOutlined,
  // RightOutlined,
  // DeleteOutlined,
  // CheckCircleTwoTone,
} from '@ant-design/icons-vue'
const labelCol = {
  style: {
    width: '180px',
  },
}
const wrapperCol = {
  span: 24,
}

const formRef = ref()
const formState = reactive({
  icons: [],
  banner: [],
  name: '',
  englishName: '',
  play: '',
  style: '',
  themes: '',
  features: [],
  age: [],
  states: [],
  description: '',
  profile: '',
})
const rules = {
  name: [
    {
      required: true,
      message: 'Please input Activity name',
      trigger: 'change',
    },
    {
      min: 1,
      max: 20,
      message: 'Length should be 1 to 20',
      trigger: 'blur',
    },
  ],
  age: [
    {
      required: true,
      message: 'Please select Activity zone',
      trigger: 'change',
    },
  ],
  // types: [{ required: true, message: '请选择游戏分类', trigger: 'change' }],
  types3: [
    {
      required: true,
      message: 'Please select Activity zone',
      trigger: 'change',
    },
  ],
  states: [
    {
      type: 'array',
      required: true,
      message: 'Please select at least one activity type',
      trigger: 'change',
    },
  ],
  description: [
    {
      required: true,
      message: 'Please input Activity name',
      trigger: 'change',
    },
    {
      min: 5,
      max: 15,
      message: 'Length should be 5 to 15',
      trigger: 'blur',
    },
  ],
  profile: [
    {
      required: true,
      message: 'Please input Activity name',
      trigger: 'change',
    },
    {
      min: 60,
      max: 500,
      message: 'Length should be 60 to 500',
      trigger: 'blur',
    },
  ],
}
// const formItemLayout = {
//   labelCol: {
//     span: 4,
//   },
//   wrapperCol: {
//     span: 8,
//   },
// }
// const formTailLayout = {
//   labelCol: {
//     span: 4,
//   },
//   wrapperCol: {
//     span: 14,
//     offset: 4,
//   },
// }
const options = ref([
  {
    value: 'jack',
    label: 'Jack',
  },
  {
    value: 'lucy',
    label: 'Lucy',
  },
  {
    value: 'tom',
    label: 'Tom',
  },
])
const options1 = ref([
  {
    value: 'jack',
    label: 'Jack',
  },
  {
    value: 'lucy',
    label: 'Lucy',
  },
  {
    value: 'tom',
    label: 'Tom',
  },
])
const options2 = ref([
  {
    value: 'jack',
    label: 'Jack',
  },
  {
    value: 'lucy',
    label: 'Lucy',
  },
  {
    value: 'tom',
    label: 'Tom',
  },
])
const options3 = ref([
  {
    value: 'jack',
    label: 'Jack',
  },
  {
    value: 'lucy',
    label: 'Lucy',
  },
  {
    value: 'tom',
    label: 'Tom',
  },
])
const options4 = ref([
  {
    value: 'jack',
    label: '不限制',
  },
  {
    value: 'lucy',
    label: 'Lucy',
  },
  {
    value: 'tom',
    label: 'Tom',
  },
])
const optionsWithDisabled = ref([
  {
    label: '修改',
    value: 'Apple',
  },
  {
    label: '推荐',
    value: 'Pear',
  },
  {
    label: '免费',
    value: 'Orange',
  },
  {
    label: '中文',
    value: 'Z',
  },
  {
    label: '免谷歌',
    value: 'M',
  },
  {
    label: '无广告',
    value: 'W',
  },
  {
    label: '需网络',
    value: 'X',
  },
  {
    label: '加速',
    value: 'J',
  },
  {
    label: '返利',
    value: 'F',
  },
  {
    label: 'VPN',
    value: 'vpn',
  },
])
// const state = reactive({
//   value4: ['Apple'],
// });
const maxTagCount = ref(2)
const onSave = () => {
  formRef.value
    .validate()
    .then(() => {
      console.log('values', formState, toRaw(formState))
    })
    .catch(e => {
      console.log(formState, e, 'catch--1111')
    })
}
const resetForm = () => {
  formRef.value.resetFields()
  formState.type = ''
  formState.date1 = ''
  formState.txt = ''
}
const views = () => {
  console.log('view', 1111)
}
</script>

<style lang="less" scoped>
.app-container {
  width: 100%;
  padding: 0 14px;
  // background: #ececec;
}

.box-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  border-radius: 2px;
  // border: 1px solid #e6ebf5;
  overflow: hidden;
  color: #303133;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  h1 {
    height: 48px;
    text-align: center;
    font-weight: bolder;
  }
}
.upload-container {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
}
:deep(.ant-upload-wrapper.ant-upload-picture-card-wrapper) {
  width: auto;
}
.upload-instructions {
  // flex: 1;
  // margin-left: 20px;
  font-size: 12px;
  color: #888;
}
.fr {
  display: block;
  // float: left;
  margin-top: -40px;
  margin-left: 140px;
  // width: 400px;
  width: 100%;
  height: 40px;
  white-space: pre-wrap;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #969696;
  line-height: 20px;
  text-align: left;
}
.frInput {
  // display:flex;
  // float: left;
  // margin-top: -40px;
  // margin-left:140px;
  width: 400px;
  height: 40px;
  white-space: pre-wrap;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #969696;
  line-height: 20px;
  text-align: left;
}
.fr1 {
  margin-top: 0px !important;
}
.margin_rt24 {
  margin-right: 24px;
}
.margintop18 {
  margin-top: 18px;
  font-weight: 400;
  font-size: 14px;
  color: #cccccc;
  line-height: 20px;
  text-align: left;
}
.icons {
  width: 80px;
  height: 20px;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
}
.footer_content {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
